<template>
  <div class="vue-music clearfix">
    <el-scrollbar style="height: 100%">
    <div class="main">
      <el-card class="box-card mb15" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="fs16"><a class="ml5" target="_blank" href="https://github.com/SevenOutman/vue-aplayer">https://github.com/SevenOutman/vue-aplayer</a></span>
        </div>
        <div class="fs14 p10 lh20 text-left">
          <code>
            npm install vue-aplayer --save<br>
          </code>
        </div>
      </el-card>
      <aplayer
        autoplay
        :music="{
          title: 'Preparation',
          author: 'Hans Zimmer/Richard Harvey',
          url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
          pic: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
          lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
        }"
        :list="list"
        >
      </aplayer>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'

export default {
  name: 'VueMusic',
  components: {
    Aplayer
  },
  data () {
    return {
      list: [{
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
      }, {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
      }, {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
        pic: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
      }]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.vue-music{
  margin: 0 auto;
  overflow: hidden;
  .main{
    padding: 10px;
  }
}
</style>
